<template>
  <el-container id="userLayout" style="height: 99.8vh;">
    <el-header class="header" style="padding: 0;">
      <!-- <el-image class="logo" :src="getAssetsFile('../assets/logo.jpg')" /> -->
      <img src="../assets/logo.jpg" alt="logo" />
    </el-header>

    <el-main class="content">
      <div class="formWrapper">
        <RouterView />
      </div>
    </el-main>
    
    <el-footer class="footer">
      <a href="https://gitee.com/charles_n47_gitee/zhifou" target="_blank">
        项目前后端 Gitee 源码
      </a>
      <a href="http://charles.wow.sh.cn/zhifou/doc.html" target="_blank">
        项目前后端 API 接口测试
      </a>
    </el-footer>
  </el-container>
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router';

</script>

<style scoped>
#userLayout {
  text-align: center;
  background: url("https://gw.alipayobjects.com/zos/rmsportal/FfdJeJRQWjEeGTpqgBKj.png")
    0% 0% / 100% 100%;
}

#userLayout .header {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 15vh
}

#userLayout .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  height: 100%;
  padding: 0;
}

#userLayout img {
  max-height: 10vh;
  max-width: 100%;
}

#userLayout .content .formWrapper {
  width: 30vw;
  height: 40%;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 5vh;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #efefef;

  a {
    margin: 2px 0;
    color: #666;
  }
}
</style>
